<template>
  <div class="keyword">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item :model="form">
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="form.name"
              clearable
              placeholder="请输入关键字"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-input
              clearable
              v-model="form.unitName"
              placeholder="请输入跳转链接"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-button type="primary" icon="el-icon-search" @click="onSubmit1()"
          >查找</el-button
        >
        <el-button type="primary" icon="el-icon-edit" @click="handleAdd()"
          >添加</el-button
        >

        <el-button type="primary" icon="el-icon-download">导出</el-button>
      </el-form-item>
    </el-form>

    <!-- content -->
    <div class="form-box">
      <!--  tableData 他是后端请求的数据-->
      <!-- prop对应的是后端给的字段 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="id"
          sortable
          show-overflow-tooltip
          label="关键词ID"
        >
        </el-table-column>

        <el-table-column prop="keyword" show-overflow-tooltip label="关键词">
        </el-table-column>

        <el-table-column prop="url" show-overflow-tooltip label="跳转链接">
        </el-table-column>

        <el-table-column prop="isHot" show-overflow-tooltip label="是否推荐">
          <template slot-scope="scope">
            <el-button type="primary" plain v-if="scope.row.isHot == false"
              >否</el-button
            >
            <el-button type="success" plain v-else>是</el-button>
          </template>
        </el-table-column>

        <el-table-column
          prop="isDefault"
          show-overflow-tooltip
          label="是否默认"
        >
          <template slot-scope="scope">
            <el-button type="primary" plain v-if="scope.row.isDefault == false"
              >否</el-button
            >
            <el-button type="success" plain v-else>是</el-button>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <!-- scope.row当前行信息 -->
            <!-- scope.$index当前点击的下标 -->
            <el-button type="danger" @click="handleDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        :total="obj.total"
        @handleSize="handleSizeChange"
        @handleCurrent="handleCurrentChange"
      ></pagination>

      <!-- 弹出框 -->
      <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="关键字" prop="keyword">
            <el-input placeholder="请输入关键字" v-model="ruleForm.keyword">
            </el-input>
          </el-form-item>

          <el-form-item label="跳转链接" prop="url">
            <el-input v-model="ruleForm.url"> </el-input>
          </el-form-item>

          <el-form-item label="是否推荐" prop="isHot">
            <el-select v-model="ruleForm.isHot" placeholder="请选择">
              <el-option label="推荐" value="1"></el-option>
              <el-option label="不推荐" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="是否默认" prop="isDefault">
            <el-select v-model="ruleForm.isDefault" placeholder="请选择">
              <el-option label="默认" value="1"></el-option>
              <el-option label="不默认" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <!-- <template slot-scope="scope">
            
          </template> -->
          <el-button @click="closeForm()">取消</el-button>

          <el-button
            type="primary"
            @click="handleUpdate()"
            v-if="this.title == '编辑'"
            >确定</el-button
          >
          <el-button
            type="primary"
            @click="handleSubmit()"
            v-if="this.title == '创建'"
            >确定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import pagination from "./components/pagination.vue";

import { listKeyword } from "@/api/keyword";
import { createKeyword } from "@/api/keyword";
import { deleteKeyword } from "@/api/keyword";
import { updateKeyword } from "@/api/keyword";

export default {
  components: {
    pagination,
  },
  data() {
    return {
      ids: "",
      title: "",
      dialogVisible: false,
      tableData: [],
      ruleForm: {
        id: "",
        keyword: "",
        url: "",
        isHot: "",
        isDefault: "",
      },
      obj: {
        // 页码
        page: 1,
        // 每页多少条
        rows: 10,
        // 默认选中哪一页
        currentPage: 1,
        total: null,
      },
      form: {
        name: "",
        unitName: "",
      },
      // 验证规则
      rules: {
        keyword: [{ required: true, message: "请输入关键词", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 数据
    onsubmit() {
      let da = {
        page: this.obj.page,
        limit: this.obj.rows,
        // sort: add_time,
        // order: desc,
      };
      listKeyword(da).then((res) => {
        console.log(res.data);

        this.obj.total = res.data.data.total;
        this.tableData = res.data.data.list;
      });
    },

    // 搜索
    onSubmit1() {
      let da = {
        keyword: this.form.name,
        url: this.form.unitName,
        page: this.obj.page,
        limit: this.obj.rows,
        // sort: add_time,
        // order: desc,
      };
      listKeyword(da).then((res) => {
        console.log(res.data);

        this.obj.total = res.data.data.total;
        this.tableData = res.data.data.list;
      });
    },

    // 提交
    handleSubmit() {
      let da = {
        isDefault: this.ruleForm.isDefault == 1,
        isHot: this.ruleForm.isHot == 1,
        keyword: this.ruleForm.keyword,
      };
      createKeyword(da).then((res) => {
        console.log(res);
        this.$notify({
          title: "成功",
          message: "创建成功",
          type: "success",
        });
        // 关闭模态框
        this.dialogVisible = false;
        setTimeout(() => {
          this.onsubmit();
        }, 500);
      });
    },

    // 删除
    handleDel(row) {
      let da = {
        id: row.id,
        isDefault: row.isDefault == 1,
        isHot: row.isHot == 1,
        keyword: row.keyword,
      };
      deleteKeyword(da).then((res) => {
        console.log(res);
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success",
        });
        setTimeout(() => {
          this.onsubmit();
        }, 500);
      });
    },

    // 更新
    handleUpdate() {
      let da = {
        id: this.ids,
        isDefault: this.ruleForm.isDefault == 1,
        isHot: this.ruleForm.isHot == 1,
        keyword: this.ruleForm.keyword,
        // deleted: false,
      };
      updateKeyword(da).then((res) => {
        console.log(res);
        this.$notify({
          title: "成功",
          message: "更新成功",
          type: "success",
        });
        // 关闭模态框
        this.dialogVisible = false;
        setTimeout(() => {
          this.onsubmit();
        }, 500);
      });
    },

    // 分页开始
    handleSizeChange(val) {
      console.log(val, "接收");
      // 当我点击每页多少条的时候赋值并重新渲染页面
      this.obj.rows = val;
      this.onSubmit();
    },
    handleCurrentChange(val) {
      console.log(val, "接收");
      // 当我点击页码的时候将页码赋值给变量并重新渲染页面
      this.obj.page = val;
      this.onSubmit();
    },
    // 分页结束

    // 添加
    handleAdd() {
      // 显示模态框
      this.dialogVisible = true;
      // 标题改为新增
      this.title = "创建";
      // 等待dom加载完之后清空验证并清空内容
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
      });
      this.ruleForm.keyword = "";
      this.ruleForm.url = "";
      this.ruleForm.isHot = "";
      this.ruleForm.isDefault = "";
    },

    // 取消按钮
    closeForm() {
      // 清空验证并清空内容
      this.$refs["ruleForm"].resetFields();
      // 关闭模态框
      this.dialogVisible = false;
    },

    // 编辑
    handleEdit(row) {
      console.log(row);
      this.ids = row.id;

      // 显示模态框
      this.dialogVisible = true;
      // 标题改为
      this.title = "编辑";

      this.ruleForm.keyword = row.keyword;
      this.ruleForm.url = row.url;
      this.ruleForm.isHot = row.isHot;
      this.ruleForm.isDefault = row.isDefault;

      // console.log(this.ruleForm.isHot,"123456");

      if (this.ruleForm.isHot == true) {
        this.ruleForm.isHot = "推荐";
      } else {
        this.ruleForm.isHot = "不推荐";
      }

      if (this.ruleForm.isDefault == true) {
        this.ruleForm.isDefault = "默认";
      } else {
        this.ruleForm.isDefault = "不默认";
      }
    },
  },
  mounted() {
    this.onsubmit();
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/mall/mallstyle/keyword.scss";
</style>
